<template>
    <div class="layout">
        <Row type="flex">
            <Col span="24">
                <div class="layout-header">
                    <img src="../assets/decoration/001.png">
                    <img src="../assets/decoration/002.png" align="right">
                </div>

                <!--面包屑导航 -->
                <!-- <div class="layout-breadcrumb">
                    <Breadcrumb>
                        <BreadcrumbItem href="/">首页</BreadcrumbItem>
                        <BreadcrumbItem href="/">应用中心</BreadcrumbItem>
                        <BreadcrumbItem>{{ tempRoure }}</BreadcrumbItem>
                    </Breadcrumb>
                </div>  -->
                <!-- 内容区域-->
                <div class="layout-content">
                <!-- <div class="zhanwei">helloworld</div> -->
                  <div class="bread-content">
                        <el-menu theme="dark" :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                        <el-menu-item index="1"></el-menu-item>
                            <router-link to="/dashboard/home">
                                <el-menu-item index="1">首页</el-menu-item>
                            </router-link>
                            <router-link to="/dashboard/ProductManagement/ProductBrowser">
                                <el-menu-item index="2">产品展示</el-menu-item>
                            </router-link>
                            <router-link to="/dashboard/NewsManagement/NewsBrowser">
                                <el-menu-item index="3">新闻资讯</el-menu-item>
                            </router-link>
                            <router-link to="/dashboard/AboutUsManagement/AboutUsBrowser">
                                <el-menu-item index="4">关于我们</el-menu-item>
                            </router-link>
                            <router-link to="/dashboard/ConnectUsManagement/ConnectUsBrowser">
                              <el-submenu index="5">
                                <template slot="title">联系我们</template>
                                <!-- <router-link to="/dashboard/ConnectUsManagement/LeaveWord/LeaveWord"> -->
                                <el-menu-item index="5-1">留言</el-menu-item><!-- 路由无法跳转 -->
                                <!-- </router-link> -->
                            </el-submenu>
                        </router-link>
                    </el-menu>
            </div>
            <div class="layout-content-main">
                <router-view></router-view>
            </div>
        </div>
        <div class="layout-footer"></div>
    </Col>
</Row>
</div>
</template>

<script>
  export default {
    data() {
      return {
        activeIndex: '1',
        activeIndex2: '1'
    };
},
methods: {
  handleSelect(key, keyPath) {
    console.log(key, keyPath);
}
}
}
</script>
<style scoped>
    .layout{
        border: 1px solid #d7dde4;
        background: #f5f7f9;
        position: relative;
        /*height: 100%;*/
    }
    .layout-breadcrumb{
        padding: 10px 15px 0;
    }
    .layout-content{
        min-height: 200px;
        margin: 0px;
        overflow: hidden;
        background: #fff;
        border-radius: 4px;
    }
    .layout-content-main{
        padding: 10px;
    }
    .layout-header{
        height: 100px;
        background: #fff;
        box-shadow: 0 1px 1px rgba(0,0,0,.1);
    }
    .layout-footer{
        height: 60px;
        background: #fff;
        box-shadow: 0 1px 1px rgba(0,0,0,.1);
    }
    .bread-content{
        background: red;  /*不管用*/
        font-size: 50px;
    }
    /*.zhanwei{
        width: 30px;
        height: 100%;
        float: left;
        background: red;
    }*/
    .el-menu-demo{
        background: #2B2B2B;
        font-size: 100px;   /*可以设置加粗但是不可以把字号变了，也是奇怪*/
        font-weight:bold;
    }
</style>
